$(function(){
  var root = $('#joinus');
  function layout(){
    var w = global.W/3;
    $('.center',root).width(global.W/3).css({
      width: w,
      top: global.H/2 - (537*w/663)/2,
      left: global.W/2 - w/2
    });;
    $('.left-cnt,.right-cnt',root).width(global.W/3 -50);
    $('.txt-panel',root).height(global.H-150);
    var imgH = $('.follow',root).height();
    if(imgH == 0){
      setTimeout(layout,500);
      return;
    }
    $('.follow',root).css({
      top: (global.H-imgH)/2 - (imgH/3)
    });

  }


  $('.btn' ,root).click(function(){
    $('.btn',root).toggleClass('active');
    var $el = $('.btn',root);
    if($el.hasClass('active')){
      $('.txt-panel .tx',root).text('');
      $el.animate({
        top: global.H-100},function(){

          $('.txt-panel',root).data('typewriter').start();
        });
    }else{
      $el.animate({
        top: '50%'});
    }
    $('.mask',root).toggleClass('active');
  });
  $('.txt-panel',root).typewriter();
  layout();
  registerResize(layout);
});